<!--选择项目界面-->
<template>
  <div class="home">
    
    <div class="main row">
      <div v-if="flag == '0'" class="main-item item-add" @click="addPro">+添加项目</div>
      <div
        class="main-item"
        v-for="(item) in projectList"
        :key="item.name"
      >
        <div class="item-title row font">
          <span>{{ item.name }}</span>
          <div class="row" style="color: #49a9ee">
            <div
            v-if="flag == '0'"
              class="project-opration"
              style="margin-right: 20px"
              @click="deletePro(item.id)"
            >
              删除
            </div>
            <a @click="intoPro(item.id)">进入</a>
          </div>
        </div>
        <a  class="item-content" @click="editPro(item.id)">
          <div class="item-row row" style="padding-top:10px">
            <!-- <div style="width: 50%" v-for="choiceitem in projectChoiceList" v-if="choiceitem.id==item.id">工程类别：{{ choiceitem.typeName }}</div> -->
            <div style="width: 50%" >工程类别：{{ item.projectType }}</div>
            <div style="width: 50%" >工程用途：{{ item.projectPurpose }}</div>
          </div>
          <div class="item-row row">
            <div style="width: 50%" >工程状态：{{ item.projectStatus }}</div>
            <div style="width: 50%">结构类型：{{ item.structureType }}</div>
          </div>
          <div class="item-row">
            <div>工程规模：{{ item.scale }}</div>
            <!-- <div style="width: 50%">工程类别：铁路工程}</div> -->
          </div>
          <div class="item-row">
            <div>合同工期：{{ item.startDataPlan }}至{{ item.endDataPlan }}</div>
          </div>
          <div class="item-row">
            <div style="display: flex;flex-direction: row;">
                <div style=" whiteSpace:nowrap;">项目介绍：</div>
                <div>{{ item.introduction }}</div></div>
          </div>
        </a>
      </div>
    </div>
    <div class="center-bottom">
        <span>Copyright © 昊广智联</span>
        <br/>
        <span>Email: 123456789@qq.com &nbsp;&nbsp;QQ: 123456789</span>
    </div>
  </div>
</template>

<script>
import projectApi from '@/api/acl/project'
import userApi from '@/api/acl/user'
import corpApi from '@/api/corp.js'
import Cookies from 'js-cookie'
export default {
  data() {
    return {
      projectList: [
        // {
        //   name: "项目二",
        //   type: "铁路工程",
        //   application: "公共建筑",
        //   status: "在建",
        //   structureType: "1200",
        //   scale: "结构1",
        //   startTime: "2018-12-05",
        //   endTime: "2018-12-30",
        //   introduction:
        //     "公共建筑公共建筑公共建筑公共建筑公共建筑公共建筑公共建筑公共建筑公共建筑公共建筑公共建筑公共建筑公共建筑公共建筑公共建筑",
        //   active:false
        // },
      ],
      flag: '0',
      corpList: []
    };
  },
//   computed: {
//     ...mapGetters(["sidebar", "avatar"]),
//   },
  created() {
    this.fetchData()
  },

  methods: {
    getNickName() {
      userApi.getUserinfo().then(res => {
        localStorage.setItem("nickName",res.data.userinfo.nickName)
        // console.log(res.data.userinfo.nickName);
      })
    },
    managementReturn() {
      this.$router.push({ path:  '/' })
      console.log("返回");
    },
    myCount() {
      console.log("我的账户");
    },
    addPro(){
      console.log("添加项目");
      
      // if(hasRole("")){
        this.$router.push({ path:'/projectAdd' })
      // }else{
      //   console.log("无权限-----")
      // }
      
    },
    editPro(id){
      console.log('编辑项目');
      console.log(localStorage.getItem("companyId") == undefined);

      if(this.flag == '0') {
        this.$router.push({ path:'/projectAdd' ,query:{id:id}})
      } else {
        this.$message({
          type: "error",
          message: "你没有修改项目权限!",
        });
      }  
    },
    deletePro(id) {
      console.log(id);
      this.$confirm('确定要删除该项目吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      projectApi.projectRemove(id).then(res=>{
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        this.$router.go(0)

      }).catch(res=>{
        this.$message({
            type: 'info',
            message: '已取消删除'
          })
      })
      //this.projectList.splice(index, 1);
      })
    },
    intoPro(index) {
      localStorage.setItem("projectId",index);//存储
      let projectId = index

      corpApi.listByProjectId().then(res => {
          this.corpList = res.data.data.records
      })

      this.projectList.forEach(function(item,index) {
        if(item.id == projectId) {
          localStorage.setItem('projectName',item.name)
        }
      })
      this.$router.push({ path:'/' })
    },
    fetchData() {
      // 异步获取远程数据（ajax）
      projectApi.getProjectList().then(res => {
        console.log(res);
          this.projectList = res.data.projectList
          this.flag = res.data.flag
          // 数据加载并绑定成功
          // this.listLoading = false
        }
      )
      this.getNickName()
      let companyId = ''
      userApi.selectCompanyId().then(res=>{
        console.log('companyId',res.data.companyId);
        
        if(res.data.companyId != 0) {
          companyId = res.data.companyId
          localStorage.setItem("companyId",companyId)
          corpApi.detail(companyId).then(res => {
              localStorage.setItem("companyName",res.data.data.name)
          })
        } 
      })
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.home {
  min-height: 100%;
  padding-top: 5%;
  background-image: url("../../../../static/img/backgroung/tenant_back.jpg");
  width: 100%;
}
.font {
  font-size: 25px;
  
}
.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.main {
  height: 100%;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 25px;
  .main-item {
    width: 28%;
    min-height: 330px;
    padding-bottom: 5px;
    // border: solid 1px #999999;
    border-radius: 10px;
    box-shadow: 0 0 10px gray;
    background-color: #ffffff;
    margin: 35px;
    .item-title {
      line-height: 100px;
      border-bottom: dashed 2px #cccccc;
      padding: 0 20px;
      justify-content: space-between;
      font-weight: bold ;
      
      font-family:"Times New Roman",Georgia,Serif;
    }
    .item-row {
      padding: 4px 15px;
      // font-style: italic;
      font-size: 18px;
      justify-content: space-between;
    }
  }
}
.project-opration:hover {
  cursor: pointer;
}
.item-add {
  text-align: center;
  line-height: 330px;
  font-size: 50px;
  font-weight: bold;
  background-color: #569DFF !important;
  color: #f3f3f3;
  font-family:"Times New Roman",Georgia,Serif;
  // box-shadow: 1px 1px 10px #e6e6e6;
}
// .item-content{
//   font-size: 16px !important;
// }
.item-add:hover{
cursor: pointer;
  }
// .el-col {
//   border-radius: 0px;
// }
// .el-row {
//   height: 25%;
// }
// .navbar {
//   height: 50px;
//   line-height: 50px;
//   border-radius: 0px !important;
//   .hamburger-container {
//     line-height: 58px;
//     height: 50px;
//     float: left;
//     padding: 0 10px;
//   }
//   .screenfull {
//     position: absolute;
//     right: 90px;
//     top: 16px;
//     color: red;
//   }
//   .avatar-container {
//     height: 50px;
//     display: inline-block;
//     position: absolute;
//     right: 35px;
//     .avatar-wrapper {
//       cursor: pointer;
//       margin-top: 5px;
//       position: relative;
//       line-height: initial;
//       .user-avatar {
//         width: 40px;
//         height: 40px;
//         border-radius: 10px;
//       }
//       .el-icon-caret-bottom {
//         position: absolute;
//         right: -20px;
//         top: 25px;
//         font-size: 12px;
//       }
//     }
//   }
// }
// .el-card {
//   /*  padding-bottom: 49%;
//   padding-top: 49%;*/
//   margin-top: 0px;
//   padding-bottom: 15%;
//   padding-top: 15%;
// }
.center-bottom{
  margin-top: 1%;
  margin-bottom: 1%;
  text-align:center;
  color: #CCCCCC;
  font-size: 14px;
}
</style>
